<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            img{
                width: 100%;
            }
            main{
                width:600px;
                height: 200px;
                padding:20px;
                border:2px solid #999999;
                margin:20px auto 0px;
            }
            ul li{
                width: 200px;
                line-height: 40px;
                text-align: center;
                float: left;
                cursor: pointer;
            }
            a{
                font-size: 14px;
               
                text-decoration: none;
                color:blueviolet;
            }
            .current{
                background:yellow;
                color:white;
            }
            div{
              
                display: none;
            }
            .aa{
               
                display: block;
            }
        </style>
    </head>
    <body>
        <img src="images/top.jpg" alt="">
        <main >
            <ul>
                <li class="current">学党史</li>
                <li >知党情</li>
                <li>跟党走</li>
            </ul>
            <section>
                <div class="aa">
                    <a href="http://www.12371.cn/2021/05/15/ARTI1621063354910735.shtml" target="_blank">习近平：传承好红色基因 把红色江山世世代代传下</a><br><br>
                    <a href="http://www.12371.cn/2021/05/15/ARTI1621063354910735.shtml" target="_blank">习近平：绿水青山就是金山银山</a><br><br>
                </div>
                <div>
                    <a href="http://www.12371.cn/2021/05/15/ARTI1621063354910735.shtml" target="_blank">习近平：推动科学发展观</a><br><br>
                    <a href="http://www.12371.cn/2021/05/15/ARTI1621063354910735.shtml" target="_blank">习近平：科教兴国战略的发展</a><br><br>
 
                </div>
                <div>
                    <a href="http://www.12371.cn/2021/05/15/ARTI1621063354910735.shtml" target="_blank">习近平：经济文化社会的建设</a><br><br>
                    <a href="http://www.12371.cn/2021/05/15/ARTI1621063354910735.shtml" target="_blank">习近平：社会主义核心价值观念</a><br><br>
                </div>
            </section>
 
            <script>
                var tags=document.getElementsByTagName('li');
                var boxs=document.getElementsByTagName('div');
                for(var i=0;i<tags.length;i++){
                    
                    tags[i].index=i;
 
                    tags[i].onclick=function(){
                        
                        for(var m=0;m<tags.length;m++){
                            tags[m].className='';
                            boxs[m].className='';
                        }
                       
                        this.className='current';
 
                       
                        var n=this.index;
                        boxs[n].className='aa'
                    }
                }
            </script>
        </main>
    </body>
</html>